<template>
  <div class="container">
    <!-- 添加返回按钮 -->
    <button class="back-button" @click="goBack">《返回</button>

    <!-- 添加长方形卡片 -->
    <div class="card">
      <div class="card-title">订单列表</div>
    </div>

    <!-- 添加订单列表 -->
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <div v-for="(order, index) in orders" :key="index" class="order-item">
        <h3>{{ order.title }}</h3>
        <p>{{ order.description }}</p>
        <!-- 添加更多订单详情信息 -->
      </div>
    </van-list>
  </div>
</template>

<script>
export default {
  name: "OrdersForm",
  data() {
    return {
      orders: [], // 假设这是你的订单数据数组
      loading: false, // 列表是否处于加载状态
      finished: false, // 列表是否已加载完成
      page: 1, // 当前页码，用于模拟加载更多数据
    };
  },
  methods: {
    // 添加返回功能的方法
    goBack() {
      window.history.back(); // 使用浏览器的历史记录返回上一页
    },
    // 模拟加载更多数据的方法
    onLoad() {
      setTimeout(() => {
        // 这里可以替换为实际的请求订单数据逻辑，例如使用axios从后端API获取数据
        const newData = this.generateMockData(); // 假设这是新加载的数据
        this.orders = this.orders.concat(newData);
        this.loading = false;
        if (newData.length < 10) {
          // 假设每次加载10条数据，如果少于10条则认为已加载完所有数据
          this.finished = true;
        }
        this.page += 1; // 增加页码，用于下一次加载
      }, 500); // 模拟网络延迟
    },
    // 生成模拟数据的方法，仅用于示例
    generateMockData() {
      const data = [];
      for (let i = 0; i < 10; i++) {
        data.push({
          title: `订单标题 ${this.page * 10 + i}`,
          description: `订单描述 ${this.page * 10 + i}`,
          // 添加更多订单属性
        });
      }
      return data;
    },
  },
  mounted() {
    this.onLoad(); // 组件挂载后加载第一页数据
  },
};
</script>

<style scoped>
.container {
  position: relative; /* 使容器成为定位上下文 */
}

.back-button {
  position: fixed; /* 使用固定定位 */
  top: 10px; /* 调整位置 */
  left: 10px; /* 调整位置 */
  z-index: 10; /* 提高z-index以确保按钮在其他内容之上 */
  background-color: #c0e0f8; /* 设置按钮背景色为浅蓝色 */
  color: #5e5e5e; /* 设置按钮文字颜色 */
  border: none; /* 去除按钮边框 */
  border-radius: 4px; /* 添加按钮圆角边框 */
  padding: 8px 16px; /* 设置按钮内边距 */
  cursor: pointer; /* 设置鼠标悬停时显示为手形指针 */
}

.card {
  position: fixed; /* 使用固定定位 */
  top: 50px; /* 假设返回按钮高度为40px，加上一些间距 */
  left: 10px; /* 与返回键左对齐或根据需要调整 */
  width: calc(100% - 20px); /* 宽度为视口宽度减去左右间距 */
  height: 36px; /* 保持高度不变 */
  z-index: 5; /* 确保卡片在内容下方，但在返回键之后显示 */
  background-color: #c0e0f8; /* 卡片背景色 */
  display: flex; /* 使用flexbox布局 */
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  z-index: 5; /* 确保卡片在返回键下方 */
}

.card-title {
  font-weight: bold; /* 字体加粗 */
  color: #5e5e5e; /* 字体颜色 */
}

.order-item {
  padding: 10px; /* 为订单项添加一些内边距 */
  border-bottom: 1px solid #eee; /* 为订单项添加底部边框 */
}
</style>
